<template>
  <div class="login-container">
    <div class="login-header">
      
      <h1 class="title">登录授权</h1>
    </div>
    
    <div class="login-body">
      
      <p class="tip">请授权登录以继续使用服务</p>
      
      <button class="login-btn" @click="handleWechatLogin">
        微信一键登录
      </button>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { postThird } from '@/api';


const route = useRoute();
const router = useRouter();
const returnUrl = ref(route.query.returnUrl || '/');

// 处理微信登录
const handleWechatLogin = () => {
  const appId = import.meta.env.VITE_WECHAT_APPID || 'wx37989af49032475b';
  // 确保回调URL正确编码，使用当前页面路径
  const redirectUri = encodeURIComponent(`${window.location.origin}${window.location.pathname}#/login`);
  const state = 'STATE';
  const authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_userinfo&state=${state}#wechat_redirect`;
  
  console.log('跳转的授权URL:', authUrl);
  window.location.href = authUrl;
};

// 改进的回调处理
onMounted(() => {
  console.log('页面加载完成，当前路由:', route.fullPath);
  // 多种方式获取code参数
  const codeFromQuery = route.query.code;
  const urlParams = new URLSearchParams(window.location.search);
  const codeFromURL = urlParams.get('code');
  
  const code = codeFromQuery || codeFromURL;
  console.log('最终获取的code:', code);
  
  if (code && code !== '') {
    console.log('开始处理微信回调');
    handleWechatCallback(code);
  } else {
    console.log('未找到有效的code参数');
  }
});

// 处理微信回调
const handleWechatCallback = async (code) => {
  try {
    // 调用后端接口，用code换取token
    const res = await postThird({ code:code });
    
    if (res.code === 1) {
      // 存储token
      localStorage.setItem('token1', res.data.userinfo.token);
      
      // 跳转回原页面
      router.replace(returnUrl.value);
    } else {
      alert('登录失败: ' + (res.msg || '未知错误'));
    }
  } catch (err) {
    console.error('登录失败:', err);
    alert('登录失败: ' + (err.message || '未知错误'));
  }
};
</script>

<style scoped>
.login-container {
  padding: 40px;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.login-header {
  text-align: center;
  margin-top: 80px;
  margin-bottom: 60px;
}

.logo {
  width: 120px;
  height: 120px;
  border-radius: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 32px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

.login-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.auth-icon {
  width: 150px;
  height: 150px;
  margin-bottom: 40px;
  border-radius: 50%;
  background: white;
  padding: 20px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.tip {
  font-size: 28px;
  color: #666;
  margin-bottom: 60px;
  text-align: center;
  line-height: 1.5;
}

.login-btn {
  background: #07C160;
  color: #fff;
  width: 100%;
  max-width: 400px;
  border-radius: 50px;
  font-size: 32px;
  height: 80px;
  line-height: 80px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(7, 193, 96, 0.3);
}

.login-btn:hover {
  background: #06ae56;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(7, 193, 96, 0.4);
}

.login-btn:active {
  transform: translateY(0);
}

.login-footer {
  margin-top: auto;
  margin-bottom: 40px;
  text-align: center;
}

.agreement {
  font-size: 24px;
  color: #999;
  line-height: 1.5;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .login-container {
    padding: 20px;
  }
  
  .login-header {
    margin-top: 60px;
    margin-bottom: 40px;
  }
  
  .logo {
    width: 100px;
    height: 100px;
  }
  
  .title {
    font-size: 28px;
  }
  
  .auth-icon {
    width: 120px;
    height: 120px;
  }
  
  .tip {
    font-size: 24px;
    margin-bottom: 40px;
  }
  
  .login-btn {
    font-size: 28px;
    height: 70px;
    line-height: 70px;
  }
}
</style>